<!-- 商品列表 -->
<template>
  <view class="list-box">
    <view class="head-box">
      <!-- 标题栏 -->
      <shopro-navbar>
        <view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
          <u-search placeholder="请输入关键字" @change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false" height="60"></u-search>
        </view>
      </shopro-navbar>
      <!-- 筛选栏 -->
      <sh-filter @change="onFilter"></sh-filter>
    </view>

    <view class="u-waterfall u-p-16" v-if="!isEmpty">
      <view id="u-left-column" class="u-column">
        <view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList" :key="leftGoods.id">
          <shopro-goods-card
              :detail="leftGoods"
              :type="leftGoods.activity_type"
              :image="leftGoods.image"
              :title="leftGoods.title"
              :subtitle="leftGoods.subtitle"
              :price="leftGoods.price"
              :originPrice="leftGoods.original_price"
              :sales="leftGoods.sales"
              :tagTextList="leftGoods.activity_discounts_tags"
              @click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
          ></shopro-goods-card>
        </view>
      </view>
      <view id="u-right-column" class="u-column">
        <view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList" :key="rightGoods.id">
          <shopro-goods-card
              :detail="rightGoods"
              :type="rightGoods.activity_type"
              :image="rightGoods.image"
              :title="rightGoods.title"
              :subtitle="rightGoods.subtitle"
              :price="rightGoods.price"
              :originPrice="rightGoods.original_price"
              :sales="rightGoods.sales"
              :tagTextList="rightGoods.activity_discounts_tags"
              @click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
          ></shopro-goods-card>
        </view>
      </view>
    </view>

    <!-- 缺省页 -->
    <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>
    <!-- 加载更多 -->
    <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
    <!-- 登录弹窗 -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
import shFilter from './components/sh-filter.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
export default {
  components: {
    shFilter
  },
  data() {
    return {
      isEmpty: false,
      goodsList: [],
      searchVal: '',
      listParams: {
        category_id: 0,
        keywords: '',
        page: 1
      },
      loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      lastPage: 1,

      // 瀑布流 350-330
      addTime: 100, //排序间隙时间
      leftHeight: 0,
      rightHeight: 0,
      leftList: [],
      rightList: [],
      tempList: []
    };
  },
  // 触底加载更多
  onReachBottom() {
    if (this.listParams.page < this.lastPage) {
      this.listParams.page += 1;
      this.getGoodsList();
    }
  },
  onLoad() {
    if (this.$Route.query.id) {
      this.listParams.category_id = this.$Route.query.id;
      this.getGoodsList();
    } else if (this.$Route.query.hasOwnProperty('keywords')) {
      this.listParams.keywords = this.$Route.query.keywords;
      this.searchVal = this.$Route.query.keywords;
      !this.$Route.query.keywords && this.getGoodsList();
    } else {
      this.getGoodsList();
    }
  },
  methods: {
    // 瀑布流相关
    async splitData() {
      if (!this.tempList.length) return;
      let item = this.tempList[0];
      if (!item) return;

      // 分左右
      if (this.leftHeight < this.rightHeight) {
        this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
        this.leftList.push(item);
      } else if (this.leftHeight > this.rightHeight) {
        this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
        this.rightList.push(item);
      } else {
        this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
        this.leftList.push(item);
      }

      // 移除临时列表的第一项，如果临时数组还有数据，继续循环
      this.tempList.splice(0, 1);
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData();
        }, this.addTime);
      }
    },
    clear() {
      this.leftList = [];
      this.rightList = [];
      this.leftHeight = 0;
      this.rightHeight = 0;
      this.tempList = [];
    },

    onFilter(e) {
      this.listParams.order = e;
      this.goodsList = [];
      this.listParams.page = 1;
      this.lastPage = 1;
      this.clear();
      this.$u.debounce(this.getGoodsList);
    },
    // 键盘搜索,输入搜索
    onSearch() {
      this.goodsList = [];
      this.listParams.page = 1;
      this.lastPage = 1;
      this.listParams.keywords = this.searchVal;
      this.clear();
      this.$u.debounce(this.getGoodsList);
    },

    // 队列
    getArr(list, item) {
      let arr = list;
      let length = 10; //队列长度
      arr.length < length ? arr.unshift(item) : arr.pop();
      return arr;
    },

    // 清除搜索框
    clearSearch() {
      this.searchVal = '';
      this.clear();
    },
    // 商品列表
    getGoodsList() {
      let that = this;
      that.loadStatus = 'loading';
      that.$http('goods.lists', that.listParams, '加载中...').then(res => {
        if (this.searchVal && !historyTag.includes(this.searchVal)) {
          let searchHistoryArr = JSON.stringify(this.getArr(historyTag, this.searchVal));
          uni.setStorageSync('searchHistoryArr', searchHistoryArr);
        }
        if (res.code === 1) {
          that.goodsList = [...that.goodsList, ...res.data.data];
          that.isEmpty = !that.goodsList.length;
          that.lastPage = res.data.last_page;
          that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
          that.tempList = res.data.data;
          that.splitData();
        }
      });
    }
  }
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.u-waterfall {
  @include vue-flex;
  flex-direction: row;
  align-items: flex-start;
}

.u-column {
  @include vue-flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}
.head-box {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 998;
  background: #fff;
}
</style>
